<template>
  <div class="disease-classification-container">
    <!-- 主导航：显示所有方向 -->
    <div class="main-nav">
      <button v-for="direction in directions" :key="direction.id" @mouseover="selectDirection(direction)"
        :class="['nav-button', selectedDirection?.id === direction.id ? 'active' : '']">
        {{ direction.name }}
      </button>
    </div>

    <!-- 二级导航：显示当前方向下的所有分类 -->
    <div class="secondary-nav">
      <button v-for="category in categories" :key="category.id" @click="selectCategory(category)"
        :class="['secondary-button', selectedCategory?.id === category.id ? 'active' : '']">
        {{ category.name }}
      </button>
    </div>

    <!-- 疾病列表：显示当前分类下的所有疾病 -->
    <div class="disease-list">
      <div v-for="disease in diseases" :key="disease.id" class="disease-item"
        @click="navigateToDiseasePage(disease.id)">
        {{ disease.name }}
      </div>
      <div class="disease-item more" @click="showAllDiseases">
        更多>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 定义数据接口
interface Direction {
  id: number;        // 方向ID
  name: string;      // 方向名称
}

interface Category {
  id: number;        // 分类ID
  name: string;      // 分类名称
  direction: number; // 所属方向ID
}

interface Disease {
  id: number;        // 疾病ID
  name: string;      // 疾病名称
  description: string; // 疾病描述
  direction: number;  // 所属方向ID
  category: number;   // 所属分类ID
}

// 用于存储每个方向的状态
interface DirectionState {
  [key: number]: {
    selectedCategoryId: number; // 记录每个方向下选中的分类ID
  }
}

// 响应式状态声明
const directions = ref<Direction[]>([]); // 存储所有方向
const categories = ref<Category[]>([]); // 存储当前方向下的分类
const diseases = ref<Disease[]>([]); // 存储当前分类下的疾病
const selectedDirection = ref<Direction | null>(null); // 当前选中的方向
const selectedCategory = ref<Category | null>(null); // 当前选中的分类
const loading = ref(false); // 加载状态
const directionStates = ref<DirectionState>({}); // 存储每个方向的状态

// 获取所有方向数据
const fetchDirections = async () => {
  loading.value = true;
  try {
    const response = await fetch('http://127.0.0.1:8000/disease/direction/');
    directions.value = await response.json();
    if (directions.value.length > 0) {
      // 初始化时自动选择第一个方向
      await selectDirection(directions.value[0]);
    }
  } catch (error) {
    console.error('获取方向数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 获取指定方向下的所有分类
const fetchCategories = async (directionId: number) => {
  loading.value = true;
  try {
    const response = await fetch(`http://127.0.0.1:8000/disease/category/${directionId}/`);
    
    categories.value = await response.json();
    // console.log(response)
    // console.log('categories:', categories.value);

    // 获取该方向上次选中的分类ID
    const savedState = directionStates.value[directionId];
    const savedCategoryId = savedState?.selectedCategoryId;

    if (categories.value.length > 0) {
      // 如果有保存的分类ID且该分类仍然存在，则选择该分类
      const savedCategory = categories.value.find(c => c.id === savedCategoryId);
      if (savedCategory) {
        selectedCategory.value = savedCategory;
      } else {
        // 否则选择第一个分类
        selectedCategory.value = categories.value[0];
      }
      await fetchDiseases(directionId, selectedCategory.value.id);
    } else {
      selectedCategory.value = null;
      await fetchDiseases(directionId, 0);
    }
  } catch (error) {
    console.error('获取分类数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 获取指定方向和分类下的疾病列表
const fetchDiseases = async (directionId: number, categoryId: number = 0) => {
  loading.value = true;
  try {
    const response = await fetch(`http://127.0.0.1:8000/disease/disease/${directionId}/${categoryId}/`);
    diseases.value = await response.json();
  } catch (error) {
    console.error('获取疾病数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 选择方向时的处理函数
const selectDirection = async (direction: Direction) => {
  selectedDirection.value = direction;
  await fetchCategories(direction.id);
};

// 选择分类时的处理函数
const selectCategory = async (category: Category) => {
  selectedCategory.value = category;
  if (selectedDirection.value) {
    // 保存该方向的选中分类状态，以便切换方向时恢复
    directionStates.value[selectedDirection.value.id] = {
      selectedCategoryId: category.id
    };
    await fetchDiseases(selectedDirection.value.id, category.id);
  }
};

// 显示全部疾病的处理函数
const showAllDiseases = async () => {
  if (selectedDirection.value) {
    selectedCategory.value = { id: 0, name: '更多', direction: selectedDirection.value.id };
    // 保存"更多"的状态
    directionStates.value[selectedDirection.value.id] = {
      selectedCategoryId: 0
    };
    await fetchDiseases(selectedDirection.value.id, 0);
  }
};

// 跳转到疾病详情页
const navigateToDiseasePage = (diseaseId: number) => {
  window.location.href = `/disease/${diseaseId}`;
};

// 组件挂载时获取初始数据
onMounted(() => {
  fetchDirections();
});
</script>

<style scoped>
/* 容器样式 */
.disease-classification-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: #fff;
}

/* 主导航样式 */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  justify-content: center;
}

.nav-button {
  padding: 12px 32px;
  border: none;
  border-radius: 24px;
  background-color: #f5f5f5;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.nav-button.active {
  background-color: #00b38a;
  color: white;
}

.nav-button:hover {
  background-color: #00b38a;
  color: white;
  transform: translateY(-1px);
}

/* 二级导航样式 */
.secondary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  justify-content: center;
}

.secondary-button {
  padding: 8px 20px;
  border: none;
  border-radius: 16px;
  background-color: transparent;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
  text-align: center;
}

.secondary-button.active {
  background-color: #e0f2f1;
  color: #00b38a;
}

.secondary-button:hover {
  color: #00b38a;
  background-color: #e0f2f1;
}

/* 疾病列表样式 */
.disease-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 20px 0;
}

.disease-item {
  padding: 10px 16px;
  background-color: transparent;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.disease-item:hover {
  color: #00b38a;
}

.disease-item.more {
  color: #00b38a;
  font-weight: 500;
}

.disease-item.more:hover {
  text-decoration: underline;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .disease-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .nav-button {
    padding: 8px 24px;
    font-size: 14px;
    min-width: 100px;
  }

  .secondary-button {
    padding: 6px 16px;
    font-size: 13px;
    min-width: 80px;
  }
}
</style>